<template>
	<!-- 续费弹窗 -->
	<view class="vipbox"  v-if="allShowVIPnow">
		<view class="vip_main">
			<view class="vip_del" @click="closeAlert()">
				<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1719917012240382.png" mode="aspectFill"></image>
			</view>
			<view class="vip_tit">
				{{ vipInfo.Title }}
			</view>
			<view class="vip_lit">
				{{ vipInfo.Msg }}
			</view>
			<view class="vip_icon">
				<view class="icon_cell" v-for="(item, i) in vipIcon" :key="i">
					<image :src="item.icon" mode="aspectFill"></image>
					<view class="tit">
						{{ item.tit }}
					</view>
				</view>
			</view>

			<view class="vip_time">
				距限时优惠结束还剩
				<text>{{ timeOut.minutes }}</text>
				分
				<text>{{ timeOut.second }}</text>
				秒
			</view>
			<view class="vip_price">
				<view class="price_cell" v-if="vipInfo.YJ_Renew_MemberValue>vipInfo.Renew_MemberValue">
					原价：￥{{(vipInfo.YJ_Renew_MemberValue).toFixed(2)}}
				</view>
				<view class="price_cell" v-else></view>
				<view class="price_cell" v-if="vipInfo.YJ_Year_MemberValue>vipInfo.Year_MemberValue">
					原价：￥{{(vipInfo.YJ_Year_MemberValue).toFixed(2)}}
				</view>
			</view>
			<view class="vip_btn">
				<view class="btn_cell btn_moon" v-if="vipInfo.Renew_MemberValue" @click="vipPay(vipInfo.Renew_MemberValue)">
					￥{{ (vipInfo.Renew_MemberValue).toFixed(2) }}{{ vipInfo.ButtonText }}
				</view>
				<view class="btn_cell btn_year" v-if="vipInfo.Year_MemberValue" @click="vipPay(vipInfo.Year_MemberValue)">
					￥{{ (vipInfo.Year_MemberValue).toFixed(2) }}{{' '+ vipInfo.Year_ButtonText }}
				</view>
			</view>
			
			<!-- <view class="vip_close" @click="vipCloseFun">
					不再提示
				</view> -->
		</view>
	</view>
</template>

<script>
export default {
	name: 'VipAlert',
	data() {
		return {
			allShowVIPnow: false,
			vipInfo: {},
			timeOut: {
				minutes: 0,
				second: 0,
			},
			timeAll: 30 * 60 * 1000,
			timeFun: null,
			vipIcon: [
				{
					tit: '加好友',
					icon: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1719916014874358.png',
				},
				{
					tit: '加微信',
					icon: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1719916047154770.png',
				},
				{
					tit: '系统推荐',
					icon: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1719916073124229.png',
				},
			],
			user:false
		};
	},
	props: {},

	methods: {
		closeAlert() {
			console.log(1);
			this.allShowVIPnow = false;
			if (this.timeFun) {
				clearInterval(this.timeFun);
				this.timeFun = null;
			}
		},
		async getUserInfo(){
			let u = uni.getStorageSync('user');
			let res = await this.$api.post('User/GetUserInfo', {
				ID: u.UserID,
			});
			this.user = res.data || false
		},
		async IsExpiredUser() {
			
			if(this.user && this.user.IsAuth==1){
				let res = await this.$api.post('/User/IsExpiredUser');
				this.vipInfo = res.data;
				// this.vipInfo.Year_MemberValue = 0
				// this.vipInfo.YJ_Year_MemberValue = 0
				let IsNotice = res.data?.IsNotice || false;
				if (IsNotice) {
					this.allShowVIPnow = true;
					this.timeFun = setInterval(() => {
						let time = this.timeAll;
						this.countdownVip(time);
					}, 1000);
				}
			}
			
		
		},
		// 倒计时接收一个时间戳
		countdownVip(e) {
			let time = new Date(e);
			let minutes = time.getMinutes();
			let second = time.getSeconds();
			this.timeAll = this.timeAll - 1000;
			this.timeOut = {
				minutes,
				second,
			};
		},
		async vipPay(free) {
			let pres = await this.$api.post('/Payment/PayV2', {
				CompanyID: 6002,
				total_fee: free,
				EventType: '会员升级',
				body: this.vipInfo.UserType,
				SourcePage: 'member_tips_ad',
				// #ifdef MP-WEIXIN
				PayChannel: 'weixin',
				// #endif
				// #ifdef APP
				PayChannel: 'app',
				// #endif
			});

			let _this = this;
			let payObj = JSON.parse(pres.data);

			uni.requestPayment({
				provider: 'wxpay',
				// #ifdef APP
				orderInfo: payObj,
				// #endif
				// #ifdef MP-WEIXIN
				timeStamp: payObj.timeStamp,
				nonceStr: payObj.nonceStr,
				package: payObj.package,
				signType: payObj.signType,
				paySign: payObj.paySign,
				// #endif
				success: async function (res) {
					_this.$pv.msg('支付成功');
					setTimeout(() => {
						_this.closeAlert();
						// _this.upDateInfo();
					}, 500);

					// _this.nav_back(2000);
				},
				fail: function (err) {
					console.log(err);
					_this.$pv.msg('支付失败');
				},
			});
		},
	},
	async mounted() {
		await this.IsExpiredUser();
	},
};
</script>

<style lang="scss" scoped>
.vipbox {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.5);
	z-index: 101;
	display: flex;
	align-items: center;
	justify-content: center;

	.vip_main {
		width: 620rpx;
		height: 660rpx;
		box-sizing: border-box;
		padding: 36rpx 32rpx;
		background: url(https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1719915806451216.png) no-repeat;
		background-size: cover;
		background-position: center;
		border-radius: 24rpx;
		position: relative;

		// margin: 0 auto;
		.vip_del {
			position: absolute;
			right: 10rpx;
			top: 10rpx;
			width: 50rpx;
			height: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 99;
			image {
				width: 32rpx;
				height: 32rpx;
			}
		}

		.vip_tit {
			font-weight: bold;
			font-size: 42rpx;
			color: #3d210a;
			text-align: center;
		}

		.vip_lit {
			margin-top: 14rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #987045;
			text-align: center;
		}

		.vip_icon {
			margin: 40rpx 0;
			padding: 0 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.icon_cell {
				display: flex;
				align-items: center;
				flex-direction: column;

				image {
					width: 96rpx;
					height: 96rpx;
					margin-bottom: 12rpx;
				}

				.tit {
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
				}
			}
		}

		.vip_time {
			text-align: center;
			margin: 60rpx 0;
			margin-bottom: 30rpx;
			font-weight: bold;
			font-size: 24rpx;
			color: #333333;

			text {
				font-size: 24rpx;
				color: #e21f15;
			}
		}

		.vip_btn {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.btn_cell {
				flex: 1;
				width: 260rpx;
				height: 80rpx;
				box-sizing: border-box;
				border-radius: 50rpx;
				font-weight: bold;
				font-size: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.btn_moon {
				border: 2rpx solid #64441d;
				color: #64441d;
			}

			.btn_year {
				margin-left: 24rpx;
				background: linear-gradient(90deg, #432813 0%, #27221f 100%);
				color: #f7e0b2;
			}
		}
		.vip_price{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.price_cell{
				width: 260rpx;
				height: 60rpx;
				font-size: 28rpx;
				color: #b1aba4;
				display: flex;
				align-items: center;
				justify-content: center;
				text-decoration: line-through;
				text-decoration-color: #b1aba4;
			}
		}
		.vip_close {
			margin-top: 14rpx;
			text-align: center;
			font-size: 24rpx;
			color: #9f958e;
			padding: 10rpx 24rpx;
		}
	}
}
</style>
